<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.title" placeholder="请输入关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
    </div>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column label="编号" prop="id" align="center" />
      <el-table-column prop="rdd_user.userNickName" label="推荐人昵称"/>
      <el-table-column prop="recmdCount" label="已推荐人数" align="center" />
      <el-table-column prop="recmdedName" label="被推荐人姓名" align="center" />
      <el-table-column prop="recmdedCompany" label="被推荐人企业" align="center" />
      <el-table-column prop="recmdedPhone" label="被推荐人电话" align="center" />
      <el-table-column label="推荐人金额" prop="recmdMoney" align="center" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import {
	fetchRecommendFeeAjax
} from "@/api/finance";
import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	data() {
		return {
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				type: undefined
			},
			downloadLoading: false
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.listLoading = true;
			fetchRecommendFeeAjax(this.listQuery).then(response => {
				this.list = response.data.data;
				this.total = response.data.total;

				// Just to simulate the time of the request
				setTimeout(() => {
					this.listLoading = false;
				}, 1.5 * 1000);
			});
		},
		handleFilter() {
			this.listQuery.page = 1;
			this.getList();
		}
	}
};
</script>
